@if $use-headings == true {
  //------------------------------------
  //  HEADINGS
  //------------------------------------

  // Variables
  $giga-sizes: (
    "extra-small": 48px,
    "small":       64px,
    "large":       80px,
    "extra-large": 96px
  );

  $mega-sizes: (
    "extra-small": 40px,
    "small":       48px,
    "large":       64px,
    "extra-large": 72px
  );

  $kilo-sizes: (
    "extra-small": 32px,
    "small":       32px,
    "large":       48px,
    "extra-large": 64px
  );

  $h1-sizes: (
    "extra-small": 24px,
    "small":       32px,
    "medium":      36px
  );

  $h2-sizes: (
    "extra-small": 20px,
    "small":       24px,
    "medium":      30px
  );

  $h3-sizes: (
    "extra-small": 18px,
    "small":       20px,
    "medium":      24px
  );

  $h4-sizes: (
    "extra-small": 16px,
    "small":       18px,
    "medium":      20px
  );

  $h5-sizes: (
    "extra-small": 14px,
    "small":       16px,
    "medium":      18px
  );

  $h6-sizes: (
    "extra-small": 12px,
    "small":       14px,
    "medium":      16px
  );


  // Font sizing
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6,
  .giga, .mega, .kilo {
    color: $base-heading-color;
    font-family: $base-heading-font-family;
    font-weight: normal;
    text-rendering: optimizeLegibility;

    a { font-weight: inherit; }

    small {
      color: $base-sub-heading-color;
      font-size: 60%;
      line-height: 1;
    }
  }

  h1, .h1 {
    @include responsive("font-size" "line-height", map-get($h1-sizes, extra-small),
      (
         "small" : map-get($h1-sizes, small),
        "medium" : map-get($h1-sizes, medium)
      )
    );
  }

  h2, .h2 {
    @include responsive("font-size" "line-height", map-get($h2-sizes, extra-small),
      (
         "small" : map-get($h2-sizes, small),
        "medium" : map-get($h2-sizes, medium)
      )
    );
  }

  h3, .h3 {
    @include responsive("font-size" "line-height", map-get($h3-sizes, extra-small),
      (
         "small" : map-get($h3-sizes, small),
        "medium" : map-get($h3-sizes, medium)
      )
    );
  }

  h4, .h4 {
    @include responsive("font-size" "line-height", map-get($h4-sizes, extra-small),
      (
         "small" : map-get($h4-sizes, small),
        "medium" : map-get($h4-sizes, medium)
      )
    );
  }

  h5, .h5 {
    @include responsive("font-size" "line-height", map-get($h5-sizes, extra-small),
      (
         "small" : map-get($h5-sizes, small),
        "medium" : map-get($h5-sizes, medium)
      )
    );
  }

  h6, .h6 {
    @include responsive("font-size" "line-height", map-get($h6-sizes, extra-small),
      (
         "small" : map-get($h6-sizes, small),
        "medium" : map-get($h6-sizes, medium)
      )
    );
  }


  // Extra-large heading classes
  .giga {
    @include responsive("font-size" "line-height", map-get($giga-sizes, extra-small),
      (
              "small" : map-get($giga-sizes, small),
              "large" : map-get($giga-sizes, large),
        "extra-large" : map-get($giga-sizes, extra-large)
      )
    );
  }

  .mega {
    @include responsive("font-size" "line-height", map-get($mega-sizes, extra-small),
      (
              "small" : map-get($mega-sizes, small),
              "large" : map-get($mega-sizes, large),
        "extra-large" : map-get($mega-sizes, extra-large)
      )
    );
  }

  .kilo {
    @include responsive("font-size" "line-height", map-get($kilo-sizes, extra-small),
      (
              "small" : map-get($kilo-sizes, small),
              "large" : map-get($kilo-sizes, large),
        "extra-large" : map-get($kilo-sizes, extra-large)
      )
    );
  }
}
